<template>
  <div class="Home" id="scroll" ref="scroll">
    <template>
      <el-backtop target=".Home" :right="0" :bottom="0" style="width:0px;heighr:0px;z-index: 99999;">
        <div class="back-ball">回到顶部</div>
      </el-backtop>
    </template>
    <div class="Home-header">
      <div class="Home-header-menu-left">你好</div>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo Home-header-menu-ringth"
        mode="horizontal"
        @select="handleSelect"
        text-color="#fff"
        active-text-color="#ffd04b"
        background-color="#1a1a1a"
        :router="true"
      >
        <el-menu-item index="首页" route="/home/index">首页</el-menu-item>
        <el-menu-item index="品牌简介" route="/home/homebrand">品牌简介</el-menu-item>
        <el-menu-item index="真实客片" route="/home/guestpiece">真实客片</el-menu-item>
        <el-menu-item index="私人定制" route="/home/personal">私人定制</el-menu-item>
        <el-menu-item index="优惠活动" route="/home/activity">优惠活动</el-menu-item>
        <el-menu-item index="联系我们" route="/customer">联系我们</el-menu-item>
        <el-menu-item index="客户评价" route="/home/usercontent">客户评价</el-menu-item>
        <el-menu-item index="登录" route="/">登录</el-menu-item>
      </el-menu>
    </div>
    <router-view style="min-height:800px;"></router-view>
    <div class="Home-botton">
      <div class="Home-botton-both">
        <div class="Home-botton-img">
          <img src="/img/bottom_img.jpg" />
        </div>
        <div class="Home-botton-txt">
          <ul class="Home-botton-txt-ul">
            <li class="Home-botton-txt-li" v-for="(item, index) in 7" :key="index">MOVIE</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="Home-fukuan">
      <img src="/img/fkqdao.png" />
      <hr />
    </div>
    <div class="Home-footer-botton">
      <div class="Home-footer-botton-left">
        <dl v-for="(item, index) in 5" :key="index">
          <dt>国内</dt>
          <dd v-for="(item, index) in 8" :key="index">国内</dd>
        </dl>
      </div>
      <div class="Home-footer-botton-center">
        <p>
          超100万新人选择,2018年-2019年蝉联WPC中国冠军原创风格领军行业，全球200+拍摄目的地,让旅行更有意义
          <br />
          <span class="Home-footer-botton-center-span">新人注册送大礼！</span>
        </p>
        <form
          method="post"
          action="/index.php?m=formguide&amp;c=index&amp;a=show&amp;formid=19&amp;siteid=1"
          name="myform"
          id="myform"
          class="Home-footer-botton-center-from"
        >
          <input
            type="text"
            name="info[name]"
            id="name"
            placeholder="姓名"
            class="Home-footer-botton-center-name"
          />
          <input
            type="text"
            name="info[phone]"
            id="phone"
            placeholder="手机"
            class="Home-footer-botton-center-photo"
          />
          <input
            type="hidden"
            name="info[hunqi]"
            id="hunqi"
            value="1500022"
            size="10"
            class="date hunqi"
            placeholder="婚期"
            readonly
            style="display:none"
          />
          <input
            name="dosubmit"
            id="dosubmit"
            class="submit Home-footer-botton-center-submit"
            type="submit"
            value="提交"
          />
        </form>
        <dl>
          <dt>上海唯一视觉企业发展有限公司</dt>
          <dd>上海市长江路258号&lt;中成智谷&gt;</dd>
          <dd class="d1">
            Address: 258, Changjiang Road, Shanghai (Int'l Intelligence Valley)
            ONLY PHOTO Global Headquarters
          </dd>
        </dl>
      </div>
      <div class="Home-footer-botton-ringht">
        <img src="/img/erweuima.jpg" alt srcset />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "首页"
    };
  },
  methods: {
    handleSelect() {}
  },
  created() {}
};
</script>
<style lang="scss">
.Home {
  img {
    height: 100%;
    width: 100%;
    
  }
  overflow-x: hidden;
  height: 100vh;
  .Home-header {
    box-sizing: content-box;
    display: flex;
    height: 100px;
    justify-content: space-around;
    background-color: #1a1a1a;
    .Home-header-menu-ringth {
      height: 100px;
    }
    .el-menu--horizontal > .el-menu-item {
      height: 100px;
      line-height: 100px;
      font-size: 20px;
    }
    .Home-header-menu-left {
      height: 100px;
      line-height: 100px;
      font-size: 30px;
      color: #fff;
    }
  }

  .Home-footer-botton {
    display: flex;
    overflow: hidden;
    background: #282828;
    color: #9e9e9e;
    padding-top: 80px;
    margin-top: -10px;
    justify-content: space-around;
    height: 572px;
    .Home-footer-botton-left {
      display: flex;
      dl {
        padding-right: 54px;
        dt {
          font-size: 16px;
          color: #fff;
          padding-bottom: 11px;
        }
        dd {
          line-height: 25px;
          font-size: 12px;
        }
      }
    }
    .Home-footer-botton-center {
      width: 312px;
      padding-left: 72px;
      border-left: solid 1px #4e4943;
      dt {
        padding-bottom: 0;
        margin-bottom: 5px;
      }
      .dl {
        font-size: 10px;
      }
      dl dt {
        font-size: 16px;
        color: #fff;
      }
      .Home-footer-botton-center-span {
        color: #c0af93;
        font-size: 14px;
      }
      .Home-footer-botton-center-from {
        margin-top: 20px;
        overflow: hidden;
        border-bottom: solid 1px #4e4943;
        padding-bottom: 27px;
        margin-bottom: 27px;
        .Home-footer-botton-center-name {
          width: 246px;
          height: 38px;
          line-height: 38px;
          float: left;
          background: #1a1a1a;
          color: #fff;
          border: none;
          margin-bottom: 14px;
          text-indent: 10px;
        }
        .Home-footer-botton-center-photo {
          width: 246px;
          height: 38px;
          line-height: 38px;
          float: left;
          background: #1a1a1a;
          color: #fff;
          border: none;
          margin-bottom: 14px;
          text-indent: 10px;
        }
        .Home-footer-botton-center-submit {
          width: 246px;
          background: #646464;
          color: #fff;
          text-indent: 0;
          cursor: pointer;
          width: 246px;
          height: 38px;
          line-height: 38px;
          float: left;
          background: #1a1a1a;
          color: #fff;
          border: none;
          margin-bottom: 14px;
        }
      }
    }
    .Home-footer-botton-ringht {
      padding-left: 20px;
    }
  }
  .Home-botton {
    width: 100%;
    .Home-botton-both {
      position: relative;
      .Home-botton-img {
        height: 451px;
      }
      .Home-botton-txt {
        position: absolute;
        bottom: 0px;
        z-index: 100;
        height: 54px;
        width: 100vw;
        background-color: #000;
        opacity: 0.5;
        .Home-botton-txt-ul {
          display: flex;
          justify-content: center;
          .Home-botton-txt-li {
            height: 100%;
            line-height: 54px;
            color: #ccc;
            margin-left: 54px;
          }
        }
      }
    }
  }
  .back-ball {
    background-color: tomato;
    color: #fff;
    border-radius: 22px;
    padding: 10px;
    position: fixed;
    bottom: 40px;
    right: 60px;
    width: 20px;
    z-index: 99999;
  }
}
</style>